﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" id="viewport"
          content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=yes" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta charset="utf-8">
    <title>首页</title>
    <link href="../../css/css.css" rel="stylesheet" type="text/css" />

    <script src="../../js/common/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="../../js/config.js" type="text/javascript"></script>
    <script src="../../js/common/common.js" type="text/javascript"></script>

    <link href="../../css/mobiscroll.select.css" rel="stylesheet" type="text/css" />
    <script src="../../js/common/mobiscroll.core.js" type="text/javascript"></script>

    <script src="../../js/common/mobiscroll.datetime.js" type="text/javascript"></script>

    <script src="../../js/common/mobiscroll.select.js" type="text/javascript"></script>

    <script src="../../js/common/mobiscroll.treelist.js" type="text/javascript"></script>

    <style type="text/css">
        input, select {
            width: 100%;
            padding: .625em;
            margin: 0 0 .625em 0;
            border: 1px solid #aaa;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

    </style>


</head>

<body>
	<br/>
	<br/>
	<br/>
	<a href="soolife://abc">test:<a><br/>
		<br/>
		<br/>
		<br/>
<input type="button" id="alert" value="alert" />
<br />
<br />
<input type="button" id="confirm" value="confirm" />
<br />
<br />
<input type="button" id="prompt" value="prompt" />
<br />
<br />
<input type="button" id="showWaiting" value="showWaiting" />
<br />
<br />
<script>
    $("#alert").on("tap", function () {
        $.alert("你好", function (e, msg) {
            console.log(e, msg);
        }, "提示", "好");
    });

    $("#confirm").on("tap", function () {
        $.confirm("确定要删除吗？", function (e) {
        }, "提示", ["确定", "取消"]);
    });

    $("#prompt").on("tap", function () {
        $.prompt("请输入姓名", function (e, msg) {
            alert(e + msg);
        }, "提示", "姓名");
    });
    $("#showWaiting").on("tap", function () {
        $.showWaiting();
    });
</script>


<!-- Date demo markup -->
<div data-role="fieldcontain" class="demo-cont" id="demo_cont_date">
    <label for="demo_date">Try Date</label>
    <input type="text" id="demo_date" />
</div>

<!-- Date & Time demo markup -->
<div data-role="fieldcontain" class="demo-cont" id="demo_cont_datetime">
    <label for="demo_datetime">Try Date & Time</label>
    <input type="text" id="demo_datetime" />
</div>

<!-- Time demo markup -->
<div data-role="fieldcontain" class="demo-cont" id="demo_cont_time">
    <label for="demo_time">Try Time</label>
    <input type="text" id="demo_time" />
</div>

<!-- Treelist demo markup -->
<div data-role="fieldcontain" class="demo-cont" id="demo_cont_treelist">
    <label for="demo_treelist_dummy">Try Treelist</label>
    <ul id="demo_treelist">
        <li>
            America
            <ul>
                <li>
                    USA
                    <ul>
                        <li>Washington</li>
                        <li>Florida</li>
                        <li>Los Angeles</li>
                        <li>San Francisco</li>
                    </ul>
                </li>
                <li>
                    Canada
                    <ul>
                        <li>Vancouver</li>
                        <li>Winnipeg</li>
                        <li>Calgary</li>
                    </ul>
                </li>
                <li>
                    Brazil
                    <ul>
                        <li>Rio de Janeiro</li>
                        <li>Sao Paolo</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            Europe
            <ul>
                <li>
                    France
                    <ul>
                        <li>Paris</li>
                        <li>Toulouse</li>
                        <li>Marseille</li>
                        <li>Lyon</li>
                    </ul>
                </li>
                <li>
                    Germany
                    <ul>
                        <li>Berlin</li>
                        <li>Frankfurt</li>
                        <li>Hamburg</li>
                    </ul>
                </li>
                <li>
                    Spain
                    <ul>
                        <li>Madrid</li>
                        <li>Barcelona</li>
                        <li>Saragosa</li>
                    </ul>
                </li>
                <li>
                    Italy
                    <ul>
                        <li>Rome</li>
                        <li>Palermo</li>
                        <li>Genoa</li>
                        <li>Torino</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            Asia
            <ul>
                <li>
                    China
                    <ul>
                        <li>Shanghai</li>
                        <li>Hong Kong</li>
                        <li>Beijing</li>
                    </ul>
                </li>
                <li>
                    Japan
                    <ul>
                        <li>Tokyo</li>
                        <li>Kagoshima</li>
                        <li>Osaka</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div class="loading"></div>

<script>
    function select() {
        $('#demo_select').mobiscroll().select();

        // Date demo initialization
        $('#demo_date').mobiscroll().date();

        // Date & Time demo initialization
        $('#demo_datetime').mobiscroll().datetime({
            minDate: new Date(2014, 3, 10, 9, 22),
            maxDate: new Date(2015, 7, 30, 15, 44),
            stepMinute: 5
        });

        // Time demo initialization
        $('#demo_time').mobiscroll().time();

        //// Treelist demo initialization
        $('#demo_treelist').mobiscroll().treelist({});

    }

    select();


</script>
</body>
</html>
